<template>
  <div class="imagesbox">
    <div class="zoom_wrap" v-show="!boost">
      <ul class="zoom_list zoom_3">
        <li
          class="card"
          v-for="(img, index) in imgList"
          @click="openBoostImg(index)"
          :class="`card_${imgList.length}`"
        >
          <div
            class="img_content"
            :style="{ backgroundImage: `url(${img.url})` }"
          ></div>
        </li>
      </ul>
    </div>
    <div class="boost_wrapper" v-if="boost">
      <ul class="boost_control">
        <li class="bp_v_middle" @click="closeBoostImg">
          <i class="iconfont icon-shouqi bp_icon"></i>
          <span>收起</span>
        </li>
        <li class="bp_v_middle">
          <i class="bp_icon iconfont icon-fangdajing"></i>
          <span>查看大图</span>
        </li>
        <li class="bp_v_middle" @click="turnRotate(true)">
          <i class="iconfont icon-zuoxuanzhuan bp_icon"></i>
          <span>向左旋转</span>
        </li>
        <li class="bp_v_middle" @click="turnRotate(false)">
          <i class="iconfont icon-youxuanzhuan bp_icon"></i>
          <span>向右旋转</span>
        </li>
      </ul>
      <div class="boost_img">
        <div
          class="boost_img_container"
          :style="[
            boost_containerHeight
              ? {
                  height: `${boost_containerHeight}px`,
                }
              : {},
          ]"
          @click="closeBoostImg"
        >
          <img
            :src="imgList[boost_imgActive].url"
            alt="大图"
            :style="boost_imgStyle"
            :height="imgList[boost_imgActive].scaleHeight"
          />
        </div>
        <div
          class="prev"
          v-show="boost_imgActive > 0"
          @click="openBoostImg(boost_imgActive - 1)"
        ></div>
        <div
          class="next"
          v-show="boost_imgActive < imgList.length"
          @click="openBoostImg(boost_imgActive + 1)"
        ></div>
      </div>
      <div class="boost_slider_wrap">
        <div
          class="boost_slider_border"
          :class="boost_imgActive >= 0 ? `active_${boost_imgActive}` : ''"
          :style="boost_slider_boderStyle"
        ></div>
        <div class="boost_slider">
          <ul class="slider_list" style="transform: translateX(0%)">
            <li
              class="slider_item"
              v-for="(slider, index) in imgList"
              @click="openBoostImg(index)"
            >
              <img
                :src="slider.url"
                :class="index == boost_imgActive ? 'active' : ''"
              />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [],
      boostWrapWidth: 518, //大图宽度px
      zoom1Width: 240, //单图宽度px
      boost: false,
      boost_imgActive: null,
      boost_imgStyle: null,
      boost_rotate: null,
      boost_containerHeight: null,
      boost_slider_boderStyle: null,
    };
  },
  props: {
    dataList: {
      typeof: Array,
      required: true,
    },
  },
  mounted() {
    this.dataList.forEach((item) => {
      this.imgList.push({ url: item });
    });
    this.getImageInfo();
  },
  methods: {
    // 获取图片信息
    getImageInfo() {
      if (this.imgList.length) {
        this.imgList.forEach((img) => {
          const IMG = new Image();
          IMG.src = img.url;
          let { width, height } = IMG;
          let scaleHeight = 0;
          scaleHeight = height * (this.boostWrapWidth / width);
          if (width > this.zoom1Width) {
            height = height * (width / this.zoom1Width);
            width = this.zoom1Width;
          }
          this.$set(img, "width", width);
          this.$set(img, "height", height);
          this.$set(img, "scaleHeight", scaleHeight);
        });
      }
    },
    // 打开大图
    openBoostImg(index) {
      if (index < 0) {
        index = 0;
      } else if (index > this.imgList.length - 1) {
        index = this.imgList.length - 1;
      }
      if (this.boost_imgActive >= 0 && this.boost_imgActive == index) return;
      if (this.boost_containerHeight) {
        this.$set(this, "boost_containerHeight", null);
      }
      if (this.boost_rotate) {
        this.$set(this, "boost_rotate", null);
      }
      this.$set(this, "boost", true);
      this.$set(this, "boost_imgActive", index);
      let boost_imgStyle = {
        "max-width": this.boostWrapWidth,
      };
      this.$set(this, "boost_imgStyle", boost_imgStyle);
      let boost_slider_boderStyle = {
        transform: `translateX(${index * 58}px)`,
        transition: `transform 100ms linear 0s`,
      };
      this.$set(this, "boost_slider_boderStyle", boost_slider_boderStyle);
    },
    // 图片旋转
    turnRotate(direction) {
      let deg;
      if (!this.boost_rotate) {
        // 初始旋转角度
        deg = 0;
        this.$set(this, "boost_rotate", deg);
      }
      let { imgList, boost_imgActive, boost_imgStyle, boost_rotate } = this; //获取当前动态图片列表，当前图片下标，当前图片样式，当前图片角度
      let currentDeg = direction ? boost_rotate - 90 : boost_rotate + 90;
      if (currentDeg == -360 || currentDeg == 0 || currentDeg == 360) {
        // 返回原位
        boost_imgStyle = {
          "max-width": `${this.boostWrapWidth}px`,
        };
        this.$set(this, "boost_containerHeight", null); //清除容器高度
        this.$set(this, "boost_rotate", 0); //旋转角度
        this.$set(this, "boost_imgStyle", boost_imgStyle); //图片样式
      } else {
        /* 发生角度旋转*/
        let currentImg = imgList[boost_imgActive]; //获取当前图片
        let curwidth =
          currentImg.width * (this.boostWrapWidth / currentImg.height); // 放大后的实际宽度
        let curheight =
          currentImg.height * (this.boostWrapWidth / currentImg.width); // 放大后的实际高度
        let top; //上偏移或上位移
        if (currentImg.height <= currentImg.width) {
          //横图的旋转，只需要旋转居中
          if (currentDeg == -180 || currentDeg == 180) {
            // 图片180度旋转
            boost_imgStyle = {
              "max-width": `${this.boostWrapWidth}px`,
              transform: `rotate(${currentDeg}deg)`,
            };
            this.$set(this, "boost_containerHeight", null);
          } else {
            // 图片90度旋转
            top = (this.boostWrapWidth - curheight) / 2;
            if (currentDeg == 90 || currentDeg == -270) {
              top = -top;
            }
            boost_imgStyle = {
              transform: `rotate(${currentDeg}deg) translateX(${-top}px)`,
            };
            this.$set(this, "boost_containerHeight", this.boostWrapWidth);
          }
        } else {
          // 非横图旋转
          top = (this.boostWrapWidth - curwidth) / 2;
          if (currentDeg == -180 || currentDeg == 180) {
            // 图片180度旋转
            boost_imgStyle = {
              "max-width": `${this.boostWrapWidth}px`,
              transform: `rotate(${currentDeg}deg)`,
            };
            this.$set(this, "boost_containerHeight", null);
          } else {
            // 图片90度旋转
            boost_imgStyle = {
              "max-height": `${this.boostWrapWidth}px`,
              transform: `rotate(${currentDeg}deg)`,
              position: "absolute",
              top: `${-top}px`,
              left: `${top}px`,
            };
            this.$set(this, "boost_containerHeight", curwidth);
          }
        }
        this.$set(this, "boost_rotate", currentDeg);
        this.$set(this, "boost_imgStyle", boost_imgStyle);
      }
    },
    // 关闭大图
    closeBoostImg() {
      this.$set(this, "boost", false);
      this.$set(this, "boost_imgActive", null);
      this.$set(this, "boost_imgStyle", null);
      this.$set(this, "boost_rotate", 0);
    },
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bp_v_middle {
  vertical-align: middle;
}
.bp_icon {
  font-size: 14px;
  font-style: none;
  letter-spacing: 0.2px;
  font-weight: 700;
}
.imagesbox {
  width: 518px;
  user-select: none;
  text-align: center;
  .zoom_wrap {
    .zoom_list {
      line-height: 0;
      text-align: left;
      margin-top: -4px;
      margin-left: -4px;
      vertical-align: top;
      margin-bottom: 4px;
      .card {
        width: 104px;
        height: 104px;
        margin: 4px 0 0 4px;
        display: inline-block;
        vertical-align: top;
        overflow: hidden;
        position: relative;
        border-radius: 4px;
        cursor: zoom-in;
        &.card_1 {
          width: auto;
          height: auto;
          border-radius: 0;
        }
      }
      &.zoom_1 {
        width: auto;
        height: auto;
        margin-bottom: 4px;
      }
      &.zoom_2 {
        width: 456px;
      }
      &.zoom_4 {
        width: 456px;
      }
      &.zoom_5 {
        width: 456px;
      }
      &.zoom_6 {
        width: 456px;
      }
      &.zoom_7 {
        width: 456px;
      }
      &.zoom_8 {
        width: 456px;
      }
      &.zoom_9 {
        width: 456px;
      }
    }
  }
  .boost_wrapper {
    .boost_control {
      background-color: #f4f5f7;
      height: 32px;
      text-align: left;
      border-radius: 4px 4px 0 0;
      li {
        color: #666;
        font-size: 12px;
        margin: 0 16px;
        line-height: 34px;
        display: inline-block;
        cursor: pointer;
        &:hover {
          color: #00b5e5;
        }
        &:hover i {
          color: #23ade5;
        }
        i {
          display: inline-block;
          color: #999;
          margin: -2px 6px 0 0;
        }
      }
    }
    .boost_img {
      width: 100%;
      background-color: #f4f5f7;
      line-height: 0;
      cursor: zoom-out;
      position: relative;
      margin-bottom: 5px;
      .boost_img_container {
        position: relative;
      }
      .prev,
      .next {
        position: absolute;
        width: 155.4px;
        height: 100%;
        background-color: transparent;
        outline: none;
        border: none;
        zoom: 1;
      }
      .prev {
        left: 0;
        top: 0;
        z-index: 10;
        cursor: url("/static/video/cursor_prev.png"), default;
      }
      .next {
        right: 0;
        top: 0;
        z-index: 10;
        cursor: url("/static/video/cursor_next.png"), default;
      }
    }
    .boost_slider_wrap {
      height: 58px;
      width: 518px;
      position: relative;
      .boost_slider_border {
        width: 58px;
        height: 58px;
        border: 1px solid #fb7299;
        box-sizing: border-box;
        border-radius: 4px;
        position: absolute;
        left: 0;
        margin: -2px 0 0 -2px;
        top: 0;
        z-index: 1;
      }
      .boost_slider {
        width: 518px;
        margin-top: 6px;
        overflow: hidden;
        position: relative;
        .slider_list {
          text-align: left;
          white-space: nowrap;
          transition: all 0.18s cubic-bezier(0.22, 0.58, 0.12, 0.98);
          .slider_item {
            width: 54px;
            height: 54px;
            display: inline-block;
            position: relative;
            cursor: pointer;
            margin-left: 4px;
            &:nth-of-type(9n + 1) {
              margin-left: 0px;
            }
            img {
              width: 100%;
              height: 100%;
              border-radius: 4px;
              opacity: 0.5;
              transition: all 0.18s;
              &:hover {
                opacity: 1;
              }
              &.active {
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }
}
.img_content {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: #fff;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
</style>